<template>
	<hxt-layout id="hxt-layout" title="卡片" svc="img" initTitle="卡片加载失败" @initPage="initPage">
		<view class="hxt-flex-column" style="background-color: #fff;">
			<view class="hxt-flex-fill" style="overflow: hidden;">
				<hxt-scroll ref="scrollEL" id="scrollEL" scroll-y style="height:100%;" scroll-with-animation="true"
					enable-back-to-top="true" :enhanced="true" :bounces="false" @loadData="loadData">
					<view class="grid col-2" style="padding: 0 20rpx;">
						<view class="padding-sm image" v-for="(item,index) in list" :key="index"  @click="show(item.url)">
							<van-image fit="widthFix" lazy-load :src="item.url" width="100%">
							</van-image>
							<!-- <image v-if="item" :src="item" mode="aspectFill" @click="show(item)"></image> -->
						</view>
					</view>
				</hxt-scroll>
			</view>
		</view>
	</hxt-layout>
</template>

<script>
	import hxt from "@/utils/hxt.js"
	export default {
		data() {
			return {
				list: [],
			}
		},
		methods: {
			initPage: function(e) { //初始化事件
				var _this = this;
				hxt.post({
					url: hxt.domain + 'pc/graphicImgSave',
					data: {
						optType: 1
					},
					ok: function(res) {
						if (res.data.code != 0) {
							if (!!e.callBack) e.callBack(res.data.errmsg);
							return;
						};
						_this.list = res.data.data;
					},
					fail: function(res) {
						if (!!e.callBack) e.callBack(res.errMsg);
					}
				});
			},
			loadData: function(e) {
				var _this = this;
				if (!!e) {
					_this.list = [];
				}
				hxt.post({
					url: hxt.domain + 'pc/graphicImgSave',
					data: {
						optType: 1
					},
					ok: function(res) {
						if (res.data.code != 0) {
							hxt.Notify({
								type: 'danger',
								message: '加载失败：' + res.data.errmsg + '，请稍后重试！'
							});
							_this.$refs.scrollEL.refreshDone(false);
							return;
						};
						var data = res.data.data;
						_this.list = _this.list.concat(data);
						_this.$refs.scrollEL.refreshDone(false);
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：' + res.errMsg + '，请稍后重试！'
						});
						_this.$refs.scrollEL.refreshDone(false);
					}
				});
			},
			show: function(url) {
				var _this = this,
					list = _this.list.map(function(item) {
						return item.url;
					});
				wx.previewImage({
					current: url, // 当前显示图片的http链接
					urls: list // 需要预览的图片http链接列表
				});
			},
		}
	}
</script>

<style>

</style>
